import { ContactsOutlined, LockOutlined, UserOutlined } from '@ant-design/icons';
import { Alert, Button, Space, Tabs } from 'antd';
import React, { useState } from 'react';
import ProForm, { ProFormCheckbox, ProFormText } from '@ant-design/pro-form';
import { useIntl, connect, FormattedMessage } from 'umi';
import type { Dispatch } from 'umi';
import type { StateType } from '@/models/login';
import type { LoginParamsType } from '@/services/login';
import type { ConnectState } from '@/models/connect';

import styles from './index.less';

export type LoginProps = {
  dispatch: Dispatch;
  userLogin: StateType;
  submitting?: boolean;
};

const LoginMessage: React.FC<{
  content: string;
}> = ({ content }) => (
  <Alert
    style={{
      marginBottom: 24,
    }}
    message={content}
    type="error"
    showIcon
  />
);

const Login: React.FC<LoginProps> = (props) => {
  const { userLogin = {}, submitting } = props;
  const { status, type: loginType } = userLogin;
  const [type, setType] = useState<string>('account');
  const intl = useIntl();

  const handleLoginSubmit = (values: LoginParamsType) => {
    const { dispatch } = props;
    dispatch({
      type: 'login/login',
      payload: { ...values, type },
    });
  };
  const handleRegisterSubmit = (values: any) => {
    const { dispatch } = props;
    dispatch({
      type: 'login/register',
      payload: { ...values },
    });
  };
  return (
    <div className={styles.main}>
      <ProForm
        initialValues={{
          autoLogin: true,
        }}
        submitter={{
          render: (_, dom) => dom.pop(),
          submitButtonProps: {
            loading: submitting,
            size: 'large',
            style: {
              width: '100%',
            },
          },
        }}
        onFinish={(values) => {
          if (values.password) {
            handleLoginSubmit(values as LoginParamsType)
          }else {
            handleRegisterSubmit(values)
          }
          return Promise.resolve();
        }}
      >
        <Tabs activeKey={type} onChange={setType}>
          <Tabs.TabPane
            key="account"
            tab={intl.formatMessage({
              id: '账户密码登录',
            })}
          />
          <Tabs.TabPane
            key="ID"
            tab={intl.formatMessage({
              id: '身份验证',
            })}
          />
        </Tabs>
        {status === 'error' && loginType === 'account' && !submitting && (
          <LoginMessage
            content={intl.formatMessage({
              id: '错误的用户名和密码',
            })}
          />
        )}
        {type === 'account' && (
          <>
            <ProFormText
              name="userName"
              fieldProps={{
                size: 'large',
                prefix: <UserOutlined className={styles.prefixIcon} />,
              }}
              placeholder={intl.formatMessage({
                id: '用户名: admin or user',
              })}
              rules={[
                {
                  required: true,
                  message: <FormattedMessage id="用户名是必填项！" />,
                },
              ]}
            />
            <ProFormText.Password
              name="password"
              fieldProps={{
                size: 'large',
                prefix: <LockOutlined className={styles.prefixIcon} />,
              }}
              placeholder={intl.formatMessage({
                id: '密码:',
              })}
              rules={[
                {
                  required: true,
                  message: <FormattedMessage id="密码是必填项！" />,
                },
              ]}
            />
            <div
              style={{
                marginBottom: 24,
              }}
            >
              <ProFormCheckbox noStyle name="autoLogin">
                <FormattedMessage id="自动登录" />
              </ProFormCheckbox>
              <a
                style={{
                  float: 'right',
                }}
              >
                尚未注册？
              </a>
            </div>
          </>
        )}
        {type === 'ID' && (
          <>
            <ProFormText
              name="userName"
              fieldProps={{
                size: 'large',
                prefix: <UserOutlined className={styles.prefixIcon} />,
              }}
              placeholder={intl.formatMessage({
                id: '请输入学号:',
              })}
              rules={[
                {
                  required: true,
                  message: <FormattedMessage id="学号是必填项！" />,
                },
              ]}
            />
            <ProFormText
              name="candidateNumber"
              fieldProps={{
                size: 'large',
                prefix: <ContactsOutlined className={styles.prefixIcon} />,
              }}
              placeholder={intl.formatMessage({
                id: '请输入考生号:',
              })}
              rules={[
                {
                  required: true,
                  message: <FormattedMessage id="考生号是必填项！" />,
                },
              ]}
            />
          </>
        )}
        {status === 'error' && loginType === 'ID' && !submitting && (
          <LoginMessage content="出错了" />
        )}
      </ProForm>
      <Space className={styles.other}></Space>
    </div>
  );
};

export default connect(({ login, loading }: ConnectState) => ({
  userLogin: login,
  submitting: loading.effects['login/login'],
}))(Login);
